﻿@section style{
    <style type="text/css">
        .toolbar{font-size: 32px;line-height: 45px;height: 45px;padding:5px 0 5px 20px}
        .dcIC{width: 100%;height: 100%}
        .dcTools{}
        @@media (max-width: 640px){ .dcTools{font-size: 23px;line-height: 37px;height: 39px;}}
        .newDishCategory{font-size:32px;height: 45px;padding: 5px 0 5px 20px;line-height: 45px}
        #txtNewCategoryName{padding: 0 5px;}
        .circleButton{border: solid 3px #000;width:40px;height: 40px;border-radius:23px;display: inline-block;text-align: center;line-height: 42px;}
    </style>
}

<div class="dcIC" ng-controller="DishCategoryAPICtrl">
    <div class="dcTools toolbar">
        <div class="btnAddCategory icon-plus circleButton"></div>
    </div>
    <div class="newDishCategory">
        <input type="text" id="txtNewCategoryName" placeholder="enter category name" ng-model="addObject.CategoryName" />
        <span>启用</span>
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="chkEnableCategory" checked>
            <label class="onoffswitch-label" for="chkEnableCategory">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
        <div class="btnSave icon-ok circleButton" ng-click="add();"></div>
        <div class="btnCancel icon-remove circleButton"></div>
    </div>

    <ul>
        <li ng-repeat="category in categories">
            <p>{{category.CategoryName}}</p><button ng-click="delete(category.Id);">Del</button>
        </li>
    </ul>
</div>

@section scripts{
    <script type="text/javascript">
        var DishCategoryAPICtrl = [
            '$scope', '$http', function($scope, $http) {
                $scope.addObject = {};
                $scope.categories = [];

                $scope.get = function() {
                    $http.get('http://localhost:1635/api/DishCategoryAPI/Get/').success(function(data) {
                        $scope.categories = data;
                    });
                };
                $scope.add = function() {
                    $http.post('http://localhost:1635/api/DishCategoryAPI/Add/' + $scope.addObject.CategoryName).success(function(data) {
                        $scope.addObject = {};
                        $scope.categories.push(data);
                    });
                };
                $scope.delete = function(id) {
                    $http.delete('http://localhost:1635/api/DishCategoryAPI/Delete/' + id).success(function () {
                        for (var i in $scope.categories) {
                            if ($scope.categories[i].Id === id) {
                                $scope.categories.splice(i, 1);
                            }
                        }
                    });
                };
                $scope.get();
            }
        ];
    </script>
}